var input = document.getElementById("ipInput");
var clearBtn = document.querySelector(".con-clear");
var message = document.getElementById("message");
var empty = document.querySelector(".main-empty");
var query = document.querySelector(".main-query");
var queryBtn = document.getElementById("queryBtn");
// 空状态
function displayEmptyState() {
  empty.style.display = "flex";
  query.style.display = "none";
}

// 显示结果
function displayQueryState() {
  empty.style.display = "none";
  query.style.display = "block";
}

//清除input框
function clearInput() {
  input.value = "";
  clearBtn.style.display = "none";
  message.textContent = "";
  displayEmptyState();
}
function displayClearBtn() {
    if (this.value.trim() !== "") {
        clearBtn.style.display = "inline-block";
    } else {
        clearBtn.style.display = "none";
        message.textContent = "";
    }
    validateIP();
}

// 验证IP地址
function validateIP() {

  let ipAddress = input.value.trim();
  const ipv4Pattern =
    /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
  const ipv6Pattern = /^(([0-9a-fA-F]{1,4}):){7}([0-9a-fA-F]{1,4})$/;
  
  if (ipAddress === "") {
    message.textContent = "请输入IP地址";
    displayEmptyState();
    return;
  }

  if (!ipv4Pattern.test(ipAddress) && !ipv6Pattern.test(ipAddress)) {
    message.textContent = "IP格式有误，请重新输入";
    displayEmptyState();
    return;
  }

  message.textContent = "";
  displayQueryState();
}
// 填入数据
function putData(data) {
    document.getElementById("continent").textContent = data.continent;
    document.getElementById("country").textContent = data.country;
    document.getElementById("region").textContent = data.region;
    document.getElementById("city").textContent = data.city;
    document.getElementById("currency").textContent = data.currency;
    document.getElementById("postalCode").textContent = data.zip;
  
    document.getElementById("longitude").textContent = data.lon;
    document.getElementById("latitude").textContent = data.lat;
    document.getElementById("timezone").textContent =
      data.timezone + " " + data.offset;
  
    document.getElementById("isVPN").textContent = data.mobile ? "否" : "是";
    document.getElementById("isHosted").textContent = data.hosting ? "是" : "否";
    document.getElementById("mobile").textContent = data.mobile ? "是" : "否";
    displayQueryState();
  }
  
// 获取并显示数据
async function getIPData() {
  const ipAddress = ipAddressInput.value.trim();
  queryBtn.textContent = "查询中...";

  try {
    const response = await fetch(
      `http://ip-api.com/json/${ipAddress}?lang=zh-CN&fields=status,message,continent,continentCode,country,countryCode,region,regionName,city,district,zip,lat,lon,timezone,offset,currency,isp,org,as,asname,reverse,mobile,proxy,hosting,query`
    );
    const data = await response.json();

    if (data.status === "fail") {
      message.textContent = "查询失败，请重新查询或换个IP";
      displayEmptyState();
    } else {
        putData(data);
    }
  } catch (error) {
    message.textContent = "查询失败，请重新查询或换个IP";
    console.error(error.message);
    displayEmptyState();
  } finally {
    queryBtn.textContent = "查询";
  }
}

input.addEventListener("input", validateIP);
input.addEventListener("focus", function () {
    message.textContent = "";
  });
clearBtn.addEventListener("click", clearInput);

queryBtn.addEventListener("click", getIPData);




 fetch(url)
    .then((response) => response.json())
    .then((data) => {
      if (data.status === "fail") {
        message.textContent = "查询失败，请重新查询或换个IP";
        displayEmptyState();
        btnDisplay();
      } else {
        populateData(data);
        btnDisplay();
      }
    })
    .catch((error) => {
      message.textContent = "查询失败，请重新查询或换个IP";
      displayEmptyState();
      btnDisplay();
    })